<template>
  <el-container style="height: 100vh; background: linear-gradient(to top left, #6a11cb, #2575fc);">
    <!-- 左侧导航栏 -->
    <el-aside width="180px" class="sidebar">
      <el-menu :default-active="activeMenu" mode="vertical">
        <el-menu-item index="home" @click="navigateToHome">首页</el-menu-item>
        <el-menu-item index="restaurants" @click="navigateToRestaurants">餐厅</el-menu-item>
        <el-menu-item index="user" @click="navigateToUserProfile">个人信息</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容部分 -->
    <el-main class="main-content">
      <el-card>
        <h2>{{ restaurant.name }}</h2>
        <img :src="restaurant.image" alt="restaurant" class="restaurant-img" />
        <p>评分: {{ restaurant.rating }}⭐</p>
        <h3>菜品列表</h3>
        <el-table :data="restaurant.dishes" border style="width: 100%">
          <el-table-column prop="name" label="菜品名称" width="180" />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column label="图片">
            <template #default="scope">
              <img :src="scope.row.image" class="dish-img"/>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { useRoute, useRouter } from "vue-router";

export default {
  data() {
    return {
      restaurant: {
        name: '美味小厨',
        image: '/assets/restaurant1.jpg',
        rating: 4.5,
        dishes: [
          { name: '招牌牛肉面', price: '¥38', image: '/assets/dish1.jpg' },
          { name: '酸辣汤', price: '¥18', image: '/assets/dish2.jpg' },
          { name: '红烧肉', price: '¥45', image: '/assets/dish3.jpg' },
        ],
      },
      activeMenu: 'home', // 默认激活首页
    };
  },
  created() {
    const route = useRoute();
    // 获取当前路由，根据路由设置导航栏的激活项
    if (route.name === 'restaurantDetail') {
      this.activeMenu = 'restaurants'; // 设置为餐厅项
    }
  },
  setup() {
    const router = useRouter();

    // 跳转到餐厅列表页
    const navigateToRestaurants = () => {
      router.push('/restaurants');
    };

    // 跳转到首页
    const navigateToHome = () => {
      router.push('/');
    };

    // 跳转到用户信息页
    const navigateToUserProfile = () => {
      router.push('/user');
    };

    return { navigateToHome, navigateToRestaurants, navigateToUserProfile };
  },
};
</script>

<style scoped>
/* 左侧导航栏 */
.sidebar {
  background-color: rgba(255, 255, 255, 0.9); /* 背景色调整 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 修改菜单的样式 */
.el-menu {
  width: 100%;
  font-size: 18px;
}

.el-menu-item {
  color: #333;
}

.el-menu-item:hover {
  background-color: #42b983; /* 鼠标悬停时的颜色 */
}

.el-menu-item.is-active {
  background-color: #388e3c; /* 当前选中的颜色 */
}

/* 页面主体 */
.main-content {
  flex-grow: 1;
  padding: 40px 20px 20px; /* 调整主体内容的左右边距 */
  margin-left: 180px; /* 留出左侧导航栏宽度 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容水平居中 */
  justify-content: flex-start; /* 内容从顶部开始 */
}

/* 餐厅图片样式 */
.restaurant-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 菜品图片样式 */
.dish-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* 卡片内容的样式 */
.el-card {
  width: 80%; /* 限制卡片的宽度 */
  max-width: 1000px; /* 限制最大宽度 */
}

/* 菜单表格的样式 */
.el-table {
  margin-top: 20px;
  width: 100%;
}
</style>
